<template>
	<view class="info">
		<view class="img-box">
			<image @click="uploadAvatar" :src="avatarView" v-if="avatarView" class="img-size" mode=""></image>
			<image @click="uploadAvatar" v-else src="../../../static/avatar.jpg" class="img-size" mode=""></image>
		</view>
		<view class="info-item">
			<text>姓名</text>
			<input type="text" class="input-style" v-model="userName" placeholder="请输入" />
		</view>
		<view class="sex-box">
			<text>性别</text>
			<radio-group class="sex-item" @change="radioChange">
				<label>
					<view class="radio-box">
						<radio :checked="sex==0" value="0" /><text class="sextext">男</text>
					</view>
					<!-- <view>男</view> -->
				</label>
				<label>
					<view class="radio-box">
						<radio :checked="sex==1" value="1" /><text class="sextext">女</text>
					</view>
					<!-- <view>女</view> -->
				</label>
			</radio-group>
		</view>
		<view class="info-item">
			<text>年龄</text>
			<input type="text" v-model="age" class="input-style" placeholder="请输入" />
		</view>
		<view class="next" @click="toFour">下一步</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName:"",
				sex:"0",
				age:"",
				form:{
					
				},
				avatarView:''
			}
		},
		onShow() {
			this.form = uni.getStorageSync('regForm')
			if(this.form.age) {
				this.age = this.form.age
			}
			if(this.form.userName) {
				this.userName = this.form.userName
			}
			if(this.form.sex) {
				this.sex = this.form.sex
			}
			if(this.form.avatar) {
				this.avatarView = 'http://szhzykc.com:8888' + this.form.avatar
			}else {
				this.form.avatar = ''
			}
		},
		methods: {
			toFour() {
				if(this.age && this.userName) {
					this.form.age = this.age
					this.form.sex = 0
					this.form.userName = this.userName
					console.log(this.form)
					uni.setStorageSync('regForm',this.form)
					this.$utils.navto('./registerFour')
				}else {
					uni.showToast({
						title:'请完善信息',
						icon:'none'
					})
				}
			},
			radioChange(e) {
				this.sex = e.detail.value
			},
			// 上传头像
			uploadAvatar() {
				var that = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: that.$utils.http.config.baseUrl+'avatar/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								var res = uploadFileRes.data
								res = JSON.parse(res)
								this.form.avatar = res.data
								this.avatarView = 'http://szhzykc.com:8888'+res.data
								console.log(this.form)
								
							}
						});
				    }
				});
			}
		}
	}
</script>

<style scoped>
.info {
	width: 92%;
	margin: 60upx auto 0upx auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 28upx;
}
.img-box {
	width: 248upx;
	height: 248upx;
	margin: 60upx 0upx;
}
.img-size {
	width: 100%;
	height: 100%;
	border-radius: 100%;
}
.info-item {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #EAEAEA;
	padding: 30upx 0upx;
}
.input-style {
	flex-grow: 1;
	margin-left: 100upx;
	text-align: left;
}
.sex-box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #EAEAEA;
	padding: 30upx 0upx;
}
.next {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	color: #FFFFFF;
	padding: 20upx 0upx;
	border-radius: 10upx;
	background-color: #2962F9;
	margin-top: 60upx;
}
.sex-item {
	flex-grow: 1;
	margin-left: 100upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.radio-box {
	display: flex;
	align-items: center;
}
.sextext {
	margin-left: 60upx;
}
</style>
